<template>
    <div class="dashboard-container">
        <el-row :gutter="10" style="margin-top: 10px;">
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: rgb(15, 199, 199);">
                    <div>总浏览次数</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.viewCount }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: rgb(220, 130, 39);">
                    <div>话题总数</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.topicCount }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: rgb(217, 45, 105);">
                    <div>收藏总数</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.topicLoveSize }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: rgb(29, 111, 162);">
                    <div>评论总数</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.topicCommentSize }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: #fe4365">
                    <div>待审核数量</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.auditTopicCount }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: #d68189;">
                    <div>审核通过数量</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.auditPassTopicCount }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="text-center padding-xs item " style="background-color: ForestGreen;">
                    <div>未审核通过数量</div>
                    <div class="margin-top-xs text-lg">{{ DataCollect.auditFailTopicCount }}</div>
                </div>
            </el-col>

        </el-row>
        <el-row :gutter="10" class="margin-top-xs">

            <el-col :span="24">
                <TopicAnalyseEchart>

                </TopicAnalyseEchart>
            </el-col>
            <el-col :span="24" class="margin-top-lg">
                <Last7MaxTopicAnalyseEchart>
                </Last7MaxTopicAnalyseEchart>
            </el-col>
        </el-row>



    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from "echarts";
import TopicAnalyseEchart from "@/views/dashboard/TopicAnalyseEchart.vue"
import Last7MaxTopicAnalyseEchart from "@/views/dashboard/Last7MaxTopicAnalyseEchart.vue"



export default {
    name: 'Dashboard',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user"
        ])
    },
    components: { TopicAnalyseEchart, Last7MaxTopicAnalyseEchart },

    data() {
        return {
            DataCollect: {}
        };
    },
    mounted() {
        this.GetDataApi();
    },
    methods: {
        async GetDataApi() {
            let { Data } = await this.$Post("/Topic/TopicDataBoard", {});
            this.DataCollect = Data;

        },

    }


}
</script>

<style lang="scss" scoped>
.item {
    border-radius: 10px;
    color: white;
    font-weight: bold;
    margin-top: 10px;
}

.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>
